<template>
  <div class="home">
    <el-container>
      <el-header class="header">
        <h1>武术比赛报名系统</h1>
      </el-header>
      <div class="competition-container">
        <div class="competition-list" >
          <el-card class="competition-item" @click="ClickMatches(competition.id, competition.title)" v-for="competition in competitions" :key="competition.id">
            {{ competition.title }}
          </el-card>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getMatches } from '../js/api';
import { useRouter } from 'vue-router';
import { useMatchIdStore } from '../store/matchid.js'

const matchStore = useMatchIdStore();

const router = useRouter();
    
const error = ref(null);

const competitions = ref([]);

const disabled = 0; // 可以是0, 1或不设置

//跳转到登录页面
function ClickMatches(id,title) {
  localStorage.setItem('matchId', id);
  matchStore.setMatchId(id);
  router.push({ name: 'Login', query: { competitionId: id, title:title } });
}

// 获取比赛列表
onMounted(async () => {
      try {
        const data = await getMatches();
        competitions.value = data.matches; // 将比赛列表赋值给 competitions
      } catch (err) {
        error.value = err.message;
      }
});
</script>

<style scoped>
.home {
  height: 100%;
}

.el-container {
  width: 100%;
  margin: auto;
}

.header {
  height: 100px;
  background-color: #2c8fd5;
  color: white;
  font-size: 24px;
  text-align: center;
  line-height: 35px;
}

.content {
  background-color: #f5f5f5;
  padding: 20px;
}

.competition-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.competition-list {
  /* margin-top: 30px; */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  /* 项目之间有间距 */
}

.competition-item {
  flex-basis: calc(25% - 20px);
  /* 每个项目占据容器宽度的25%减去外边距 */
  margin: 10px;
  /* 为每个项目添加一些外边距 */
  box-sizing: border-box;
  /* 包括外边距在内的宽度计算 */

  background-color: #2c8fd5;
  height: 100px;

  background-color: #8cbfde;
  height: 180px;
  width: 260px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.competition-item:hover {
  background-color: #5c9cd1; 
}
</style>